{% load static core %}<!DOCTYPE html>
<html>
    <!--  -->

    <head>
        <meta charset="UTF-8">
        <title>{{title}}</title>
        <script type="text/javascript" src="{% static 'xadmin/vendor/jquery/jquery.js' %}"></script>
        <script type="text/javascript" src="{% static 'wxgeo/ol_v5.3.0/ol.js' %}"></script>
        <script type="text/javascript" src="{% static 'xadmin/vendor/bootstrap/js/bootstrap.js' %}"></script>
        <link href="{% static 'xadmin/vendor/font-awesome/css/font-awesome.css' %}" rel="stylesheet" type="text/css"
            media="screen">
        <link rel="stylesheet" href="{% static 'wxgeo/ol_v5.3.0/ol.css' %}">
        <link href="{% static 'xadmin/vendor/bootstrap/css/bootstrap.css' %}" type="text/css" media="screen" rel="stylesheet" />
        <style>
            html,body,#map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #marker{
            color: #f50000;
            font-size:36px;
            display: none;
        }
        #cnetermarker {
            width:80px;
            height: 80px;
            border: 2px solid rgba(102, 136, 180, 0.6);
            border-radius: 60px;
            background-color: rgba(96, 147, 196, 0.3);
            overflow: hidden; 
            display: flex;
            justify-content:center;
            align-items:center;
          }
        #cnetermarker img{
        }
    
        .ol-mouse-position{
            display: block;                
            color: #ffffff;
            padding: 5px;
            font-size: 16px;
            text-shadow: 0 0 20px rgb(0, 0, 0);
            top:unset;
            right: unset;
            bottom: 5px;
            right: 450px;
        }
        .rotate-north {
            top: 300px;
            left: .5em;
          }
        .ol-touch .rotate-north {
            top: 80px;
          }
        .popover{
            background-size: cover;
            display: inline-block;            
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
            background-color: rgba(0, 0, 0, 0.3);
            max-width: 400px;
          }
        .popover.top>.arrow:after{
            border-top-color:rgba(0, 0, 0, 0.3);
        }
        .popover-title{
            color: #fff;
            background-color:rgba(0, 0, 0, 0.3);
                border-bottom: 1px solid #474747;
        }
        .popover-content{
            background:unset;
            padding: 0px 0px;
            color: #fff
        }
        .popover-content>img{
            width: 350px;
            height: 250px;
            background-color: #fff;
        }
        .tooltip {
        position: relative;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        color: white;
        padding: 4px 8px;
        opacity: 0.7;
        white-space: nowrap;
      }
      .tooltip-measure {
        opacity: 1;
        font-weight: bold;
      }
      .tooltip-static {
        background-color: #ffcc33;
        color: black;
        border: 1px solid white;
      }
      .tooltip-measure:before,
      .tooltip-static:before {
        border-top: 6px solid rgba(0, 0, 0, 0.5);
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        content: "";
        position: absolute;
        bottom: -6px;
        margin-left: -7px;
        left: 50%;
      }
      .tooltip-static:before {
        border-top-color: #ffcc33;
      }
    </style>
        </script>
        <script type="text/javascript">
            window.gis_conf = {{ gis | jsonify }};
        </script>
    </head>

    <body>
        <!-- -->
        <div id="map">
            <span id="marker">
                <i class="fa fa-map-marker text-center" aria-hidden="true"></i>
            </span>
            <div id="popup"></div>
            <div id="cnetermarker">
                <img src="{%static 'wxgeo/img/geolocation_marker.png' %}"></img>
            </div>
        </div>
        <script type="text/javascript" src="{% static 'portal/api/js/default_map.js' %}"></script>
    </body>
</html>